<template>
  <view class="content">
    <view class="tab-block">
      <u-tabs
        :list="tabList"
        :scrollable="false"
        :activeStyle="{ fontSize: '28rpx', color: '#3C9CFF' }"
        :inactiveStyle="{ fontSize: '28rpx' }"
        @click="tabClick"
      ></u-tabs>
    </view>
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index">
        <view class="header-block border-b-common pb-20">
          <view class="date-block"
            >检查日期：{{ item.checkDate ? item.checkDate : "-" }}</view
          >
          <view class="date-block"
            >检查人：{{ item.checkPeo ? item.checkPeo : "-" }}</view
          >
          <u-tag size="mini" plain :text="item.stateName"></u-tag>
        </view>
        <view class="body-block border-b-common pb-10">
          <view class="body-item pt-20 pb-25">隐患名称：{{item.htName ? item.htName : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患等级：{{item.levelName ? item.levelName : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查单位：{{item.checkDept ? item.checkDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          <view class="body-item pt-20 pb-25">所属单位：{{item.beCheckDept ? item.beCheckDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患描述：{{item.description ? item.description : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患来源：{{item.sourceName ? item.sourceName : '-'}}</view>
        </view>
        <view class="footer-block pt-20">
          <view class="info-block">
            <view class="date-block"
              >整改期限：{{
                item.rectificationLimit ? item.rectificationLimit : "-"
              }}</view
            >
            <view class="date-block mt-10"
              >整改人：{{
                item.rectificationPeo ? item.rectificationPeo : "-"
              }}</view
            >
          </view>
          <view class="button-block">
            <u-button
              v-if="params.states == 3"
              class="button"
              type="primary"
              :customStyle="{ width: '120rpx', height: '50rpx' }"
              text="验收"
              @click="routeToDetail(item.id)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
  </view>
</template>

<script>
import { getDangerConfirmListApi } from "@/apis/danger/index.js";

export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        states: 3,
      },
      tabList: [
        { name: "待验收", value: 3 },
        { name: "已验收", value: 4 },
      ],
      list: [],
      pushState: true,
    };
  },
  onPullDownRefresh() {
    this.getDangerConfirmList(
      Object.assign(this.params, { pageNo: 1, pageSize: 10 })
    );
  },
  onReachBottom() {
    if (this.pushState)
      this.getDangerConfirmList(
        Object.assign(this.params, { pageNo: this.params.pageNo + 1 }),
        false
      );
  },
  onShow() {
    this.getDangerConfirmList(Object.assign(this.params, { pageNo: 1 }));
  },
  methods: {
    getDangerConfirmList: function (params, freshState = true) {
      getDangerConfirmListApi(params)
        .then((res) => {
          if (freshState) {
            this.pushState = true;
            this.list = res.list;
          } else {
            this.list = this.list.concat(res.list);
          }
          if (res.list.length < this.params.pageSize) this.pushState = false;
          uni.stopPullDownRefresh();
        })
        .catch((err) => console.warn(err));
    },
    tabClick: function (event) {
      Object.assign(this.params, { states: event.value, pageNo: 1 });

      this.getDangerConfirmList(this.params);
    },
    routeToDetail: function (id) {
      uni.navigateTo({ url: `/pagesDanger/dangerConfirmDetail?id=${id}` });
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>

<style lang="scss" scoped>
.border-b-common {
  border-bottom: 1rpx solid #f4f4f4;
}
.content {
  padding: 90rpx 25rpx 50rpx 25rpx;
  .tab-block {
    background-color: #ffffff;
    z-index: 99;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .list-block {
    .item-block {
      background-color: #ffffff;
      border-radius: 6rpx;
      box-shadow: 0 0 10rpx 0 #f4f4f4;
      padding: 25rpx;
      margin-top: 25rpx;
      .header-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .date-block {
          width: 260rpx;
          font-size: 24rpx;
          line-height: 32rpx;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .body-block {
        .body-item {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .footer-block {
        @extend .header-block;
        align-items: flex-end;
      }
      .button-block {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .button {
          width: 100rpx;
        }
      }
    }
  }
  .empty-block {
    padding-top: 300rpx;
  }
}
</style>
